<template>
  <view class="map-container">
    <view class="search">
      <van-search v-model="search" @input="input" @search="onSearch" @change="change">
        <template v-slot:rightout  > 搜索 </template>
      </van-search>
    </view>
    <view class="result-list" v-if="showListView">
      <view
        class="item1"
        v-for="(e, i) in listView"
        :key="i"
        @click="reCenter(e)"
      >
        <view class="title" v-html="e.titleV"></view>
        <view class="addr" v-html="e.addressV"></view>
      </view>
    </view>

    <view class="list">
      <radio-group @change="radioChange">
        
        <view class="item" v-for="(e, i) in curlist" :key="i">   
           <view>
              <view class="title" v-html="e.title"></view>
              <view class="addr">{{ e.address }}</view>
          </view>
          <radio :value="e.id" :checked="e.id == curid"/>
      </view>
      </radio-group>
    </view>
    <map
      id="map"
      subkey="NXZBZ-PLNCR-WDNWR-W5EPB-LGCHQ-FOF3B"
      :longitude="myLongitude"
      :latitude="myLatitude"
      :scale="13"
      @regionchange="regionchange"
      :markers="markers"
      show-location
    >
    </map>
  </view>
</template>

<script> 
// let QQMapWX = require("./qqmap-wx-jssdk.min"); 
import * as QQMap from "qqmap-wx-jssdk"  
var  QQMapWX  = QQMap.default
console.log(121,QQMapWX);
let qqmapsdk;
export default {
  components: {},
  data() {
    return {
      search: "",
      list: [],
      showListView: false,
      listView: [],
      curlist: [],
      curid:'',
      myLatitude: 22.55,
      myLongitude: 113.93,
      longitude: 0,
      mapCtx: null,
      markers: [
        {
          id: 0,

          longitude: 22.19,
          latitude: 120.12,
          width: 60,
          height: 60,
          callout: {
            content: "xxx",
            color: "#000000",
            fontSize: "32px",
            anchorX: "30px",
            anchorY: "30px",
            display: "ALWAYS",
          },
        },
      ],
      mapInfo:{},
    };
  },
  created() {
    this.mapInfo = this.$store.mapInfo;
    qqmapsdk = new QQMapWX({ key: "NXZBZ-PLNCR-WDNWR-W5EPB-LGCHQ-FOF3B" });
    var th = this;
    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        console.log("获取到坐标",res);
        th.myLongitude = res.latitude; // latitude
        th.myLatitude = res.longitude;
        th.getCenterPoint();
      },
    });
  },
  regionchange(e) {
    console.log("移动中");
    this.getCenterPoint();
  },
  mounted() {
    //this.getCenterPoint();
  },
  computed: {
    Info() {
      return this.$store.getters.getMapInfo;
    },
  },
  methods: {
    radioChange(e){
       console.log("radioChange()  ", e, this.curid );
       this.curid = e.detail.value;
       var tmp  = this.curlist.filter(e=>e.id== this.curid)[0]  
       this.$store.dispatch("asyncMapInfo",tmp);
    },
    change(e) {
      console.log("change()",e)
      this.search = e.detail
    },
    input(e){
     console.log("input()",e)
    },
    onSearch() {
      var th = this;
      console.log("search() 触发查询",1, this.search,2, !this.search.trim());
      if (!this.search.trim()) return;
      
      qqmapsdk.search({
        keyword: this.search,
        success: function (res) {
          console.log("search()", res);
          th.list = res.data;
          th.doList();
          th.showListView = true;
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {},
      });
    },
    reCenter(item) {
      console.log("重新选择一个中心", item); // location: {lat: 22.539752, lng: 114.053914}
      this.myLatitude = item.location.lat;
      this.myLongitude = item.location.lng;
      this.markers = [
        {
          id: 0,
          // iconPath: "./location.png",
          latitude: item.location.lat,
          longitude: item.location.lng,
          width: 60,
          height: 60,
          callout: {
            content: item.title,
            color: "#000000",
            fontSize: "32px",
            anchorX: "30px",
            anchorY: "30px",
            display: "ALWAYS",
          },
        },
      ];
      this.showListView = false;
      this.getCenterPoint();
    },
    regionchange(e) {
      console.log("移动中");
      this.getCenterPoint();
    },
    getCenterPoint() {
      var th = this;
      th.mapCtx = wx.createMapContext("map");
      th.mapCtx.getCenterLocation({
        success: function (res) {
          console.log("移动时候的信息", res);
          th.markers = [
            {
              id: 0,
              // iconPath: "./location.png",
              longitude: res.longitude,
              latitude: res.latitude,
              width: 60,
              height: 60,
              callout: {
                content: th.text,
                color: "#000000",
                fontSize: "32px",
                anchorX: "30px",
                anchorY: "30px",
                display: "ALWAYS",
              },
            },
          ];
          th.getPoiList(res.longitude, res.latitude);
        },
      });
    },
    /**
     * 详情见官方API配置:http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
     */
    getPoiList(longitude, latitude) {
      let th = this;
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude,
        },
        get_poi: 1,
        poi_options:
          "address_format=short;policy=2;radius=3000;page_size=10;page_index=1",
        success: function (res) {
          th.title = res.result.pois[0].title;
          th.curlist = res.result.pois;
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {},
      });
    },
    doList() {
      var str = this.search.trim();
      this.listView = this.list.map((e) => {
        var tmp = e;
        tmp.titleV = e.title.split(str).join(`<span>${str}</span>`);
        tmp.addressV = e.address.split(str).join(`<span>${str}</span>`);
        return tmp;
      });
      this.showListView = true;
    },

    add() {
      this.$store.dispatch("addAction", Number(1));
    },
    obj() {
      this.$store.dispatch("asyncApiUserInfo", { name: "WZXX", age: 11 });
    },
  },
};
</script>

<style   scoped>
 
.map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#map {
  width: 100%;
  height: 70%;
}

.map {
  width: 100%;
  height: 100%;
}
cover-image {
  width: 30rpx;
  height: 30rpx;
}

.list {
  text-align: left;
  padding: 0 10px;
  background: #fff;
  color: #000;
  height: 40vh;
  overflow: auto;
  z-index: 99;
  border-radius: 10px 10px;
  position: fixed;
  bottom: 0;
  width: 96%;
  margin-left: 2%;
  box-sizing: border-box;
}
.each {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 2px solid #fff;
}
.name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #000;
}
.addr {
  font-size: 12px;
  color: #ccc;
  min-height: 10px;
}

cover-view {
  padding: 2%;
  text-align: center;
  color: #fff;
}

/*  搜索结果的页面 */
.result-list {
  text-align: left;
  padding: 0 10px;
  background: #fff;
  color: #000;
  height: 20vh;
  overflow: auto;
  position: fixed;
  top: 45px;
  width: 100%;
  box-sizing: border-box;
  z-index: 99;
}
span {
  color: RED;
}
.item{
  display:flex;
  justify-content:space-between;
}
.item1{
  margin: 4px 0
}
radio-group{
  width: 100%;
  padding-top:10PX;
} 
radio .wx-radio-input {
   background: #fff;
   background: transparent;
   border: 1px solid #eee;
}
radio .wx-radio-input.wx-radio-input-checked {
  border-color: #ffca28 !important;
  background: #fff !important;
  border: 1px solid #ffca28;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffca28;
}
</style>
